<!-- 选择 组织架构、行政线、营销线 -->
<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import { useCurrentInstance } from '@/common/utils/methods'
  import { ResponseType } from '@/common/types/response'
  import type Node from 'element-plus/es/components/tree/src/model/node'
  

  interface nodeItemType {
    children?: nodeItemType[];
    id: number | string;
    name: string;
    subName: string;
    nodeType: number;
    nodeId: string;
    canExpand: boolean;
    leaf?: boolean;
    label?: string | undefined;
    [propName: string]: any;
  }
  interface dataType {
    checkedNum: number;
    list: nodeItemType[];
    rootNodeId: string | number;
  }
  const { $axios } = useCurrentInstance();
  const props = defineProps<{
    type: number;
  }>();

  const data: dataType = reactive({
    checkedNum: 0,
    list: [],
    rootNodeId: '',
  })

  const customProps = {
    label: 'label',
    isLeaf: 'leaf'
  }

  const formatTreeList = (list: nodeItemType[]): nodeItemType[]  => {
    return list.map((item) => {
      item.label = item.subName ? item.name + '-' + item.subName : item.name;
      item.leaf = !item.canExpand;
      if (item.children && item.children.length > 0) {
        item.children = formatTreeList(item.children)
      }
      return item;
    })
  } 

  const getRootList = () => {
    $axios.get('/erp.settings.api/notice/selectreceiver', { 
      params: { 
        organType: props.type 
      } 
    }).then((res: ResponseType) => {
      if (res.succeed) {
        data.list = formatTreeList(res.data);
      }
    })
  }

  const loadNode = (node: Node, resolve: (data: nodeItemType[]) => void) => {
    const { 
      nodeId, nodeType, parentId, realId, realIdType, rootNodeId,
      children 
    } = node.data;
    if (nodeType == 1) {
      if (children.length > 0) {
        resolve(children)
      } else {
        $axios.get('/erp.settings.api/notice/selectsubordinate', { 
          params: {
            nodeId,
            nodeType,
            organType: props.type,
            parentId,
            realId,
            realIdType,
            rootNodeId
          }
        }).then((res: ResponseType) => {
          resolve(formatTreeList(res.data))
        })
      }
    } else {
      if (data.list.length <= 0) {
        getRootList();
      } else {
        resolve([])
      }
    }
  }

  interface nodesType {
    checkedNodes: nodeItemType[];
    [propName: string]: any
  }
  const setNum = (node: nodeItemType, nodes: nodesType) => {
    $axios.post('/erp.settings.api/notice/count?organType=' + props.type, nodes.checkedNodes).then((res: ResponseType) => {
      if (res.code === '200') {
        data.checkedNum = res.data.count;
      }
    })
  }

  const tree = ref()
  const getCheckedList = () => {
    return tree.value.getCheckedNodes()
  }

  defineExpose({
    getCheckedList
  })
</script>

<template>
  <div class="check_organ">
    <p class="_key_color _mb10">所选包含{{ data.checkedNum }}人</p>
    <el-tree
      ref="tree"
      :data="data.list"
      show-checkbox
      lazy
      :props="customProps"
      :load="loadNode"
      highlight-current
      @check="setNum"
    ></el-tree>
  </div>
</template>

<style scoped>
  :deep(.is-leaf + .el-checkbox .el-checkbox__inner) {
    display: none;
  }        
</style>